<template>
   <h1>子组件</h1>
</template>

<script>
// 引入新特性
import {ref,reactive,toRef,toRefs} from 'vue'
export default {
    // 限规定，传过来的值的类型 再获取
    props:
    {
        nickname:String,
        age:Number
    },
    // 最后获取父传递的数据
    setup(props,context) {
        console.log(props.nickname);
        console.log(props.age);

        // 设置响应数据
        let name1Obj=reactive({name:'小明'});

        //抽离方式一：
        // 从对象中抽离某个属性
        var name1=toRef(name1Obj,'name')//对象，抽离name元素
        var age=toRef(name1Obj,'age');


        //响应式数据
        var name2obj=reactive({name:'小兰'})
        // 抽离整个数据
        var name2=toRefs(name2obj)//抽离整个对象
        // 抽离某个元素，结构
        var {name}=toRefs(name2obj);

        console.log(name2.name.vale);
        console.log(name.value);

        return {
            name1,
        }
        
        

    }   
}
</script>
<style>
    /* 
    ref reactive 定义一个响应式数据
    toRef toRefs 从一个对象中抽离出来一个指定的属性，抽离的值变成响应式
    
    
    
    
    
    
    
    
     */
</style>